<template>
	<div class="llf_content">
		<SearchHeader @search="onSearch" :selectform="selectform" placeholder="部门名称搜索">
			<template v-slot:rightBtn>
				<MyButton class="primary" title="新增部门" @click="TableOperation('edit')" />
			</template>
		</SearchHeader>
		<depList :tableData="dataSource" @operation="TableOperation" />
		<MyPagination :total="total" @change="onPaginationChange" ref="pageRef" />
		<MyDialog v-model:visible="createVisible" :title="currentInfo?.id ? '编辑部门' : '新增部门'" width="30%"
			destroyOnClose>
			<template v-slot:content>
				<crateDlg :currentInfo="currentInfo" @onReset="createVisible = false" @onSubmit="onSubmit" />
			</template>
		</MyDialog>
	</div>
</template>

<script lang="ts" setup>
	import { onMounted, ref,computed, watch } from "vue";
	import { Modal } from 'ant-design-vue';
	import { useOrganization } from "@/store";
	import { finddepList, deleteDep } from "@/api/orang";
	import debounce from "@/utils/debounce";
	import options from "@/common";
	import message from "@/utils/message";
	import depList from "./component/depList.vue";
	import crateDlg from "./component/crateDep.vue";
	
	const OrganStore = useOrganization();
	OrganStore.getDepNodeList();
	
	const departSelectList = computed(()=> OrganStore.$state.departSelectList);
	const selectform = ref<any>([
		{ title: '上级部门', childer:[], width: '50px', contWidth: '200px',class: 'findSubId', },
	]);
	const pageRef = ref();
	const dataSource = ref([{name:'s',id:1}]);
	const total = ref(0);
	const searchData = ref({ page:1,size:20 });
	const createVisible = ref(false);
	const currentInfo = ref({});
	
	async function getFn(){
		const res = await finddepList(searchData.value);
		if(!res) return;
		dataSource.value = res.list;
		total.value = res.total;
	}
	
	const onSearch = (inputValue: string, obj: any) => {	//搜索---子组件
		let SEARCH_VALUE = {};
		SEARCH_VALUE = obj;
		SEARCH_VALUE["title"] = inputValue;
		console.log(SEARCH_VALUE, "SEARCH_VALUE")
		searchData.value.page = 1;
		pageRef.value.changeCurrent();
		searchData.value = { ...searchData.value, ...SEARCH_VALUE };
		getFn();
	};
	
	const onPaginationChange = (value: { page: number; pageSize: number }) => { // 页码与页面数量
		const { pageSize, page } = value;
		searchData.value = { ...searchData.value, page, size: pageSize };
		getFn();
	};

	const TableOperation = async (index: string, row: any = {}) => { // 表格操作
		currentInfo.value  = row;
		switch(index){
			case 'edit':{
				createVisible.value = true;
			};break;
			case 'delete':{
				Modal.confirm({
				    content: `您确定要永久删除【${row.title}】吗？`,
				    async onOk() {
						const res = await deleteDep({ id:row.id });
						if(!res) return;
						message.success('删除成功');
						getFn();
				    },
				    // eslint-disable-next-line @typescript-eslint/no-empty-function
				    onCancel() {},
				});
			};break;
			default:console.log(1);
		}
	}
	
	const onSubmit = debounce(()=>{
		createVisible.value = false;
		getFn();
	}, 50);
	
	watch(()=>departSelectList.value,()=>{
		// console.log(departSelectList.value)
		selectform.value[0].childer = departSelectList.value;
	},{ immediate:true });
	
	onMounted(()=>{
		getFn();
	});
</script>

<style>
</style>